@import './vw';
@import './comment.scss';

* {
  box-sizing: border-box;
}

section {
  padding: vw(89) 0 vw(96) 0;
  height: 100vh;
  overflow-y: scroll;

  .content2 {
    .one {
      padding: 0 vw(29) 0 vw(29);
      height: vw(166);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .one-left {
        font-size: vw(24);

        p {
          line-height: vw(34);
        }

        >p:nth-child(2) {
          margin-bottom: vw(18);
        }

        .one-left-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #d5d5d5;

          .one-bottom1 {
            font-size: vw(18);
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-right: vw(48);

            img {
              margin-right: vw(6);
              width: vw(19);
              height: vw(18);
            }
          }

          >p {
            font-size: vw(19);

            >span:nth-child(2) {
              margin-left: vw(8);
              font-size: vw(21);
            }
          }

        }

      }

      .one-right {
        margin-left: vw(50);
        width: vw(208);

        img {
          width: 100%;
          height: vw(130);
        }
      }

      &:nth-child(1)::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: vw(40);
        height: 0;
        width: 87%;
        border-top: 1px solid #e2e2e2;
      }
    }
  }

  .line {
    height: vw(25);
    background-color: #f5f5f5;
  }

  .content3 {
    .top {
      padding: vw(35) vw(29) vw(20) vw(29);
      height: vw(260);

      >p {
        margin-left: vw(5);
        margin-bottom: vw(18);
        font-size: vw(24);
      }

      .threepic {
        margin-bottom: vw(15);
        height: vw(128);
        display: flex;
        justify-content: space-around;

        img {
          height: 100%;
          width: vw(186);
        }
      }

      .bottom {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        color: #d5d5d5;

        .bottom1 {
          font-size: vw(18);
          display: flex;
          display: -webkit-flex;
          align-items: center;
          margin-right: vw(30);

          &:nth-child(1) {
            margin-left: vw(8);
          }

          &:nth-child(3) {
            margin-right: vw(130);
          }

          img {
            border-radius: 50%;
            margin-right: vw(6);
            width: vw(20);
            height: vw(20);
          }
        }

        >p {
          font-size: vw(19);

          >span:nth-child(2) {
            margin-left: vw(8);
            font-size: vw(21);
          }
        }


      }
    }

    .two {
      padding: 0 vw(29) 0 vw(29);
      height: vw(166);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .one-left {
        font-size: vw(24);

        p {
          line-height: vw(34);
        }

        >p:nth-child(2) {
          margin-bottom: vw(18);
        }

        .one-left-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #d5d5d5;

          .one-bottom1 {
            font-size: vw(18);
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-right: vw(48);

            img {
              margin-right: vw(6);
              width: vw(19);
              height: vw(18);
            }
          }

          >p {
            font-size: vw(19);

            >span:nth-child(2) {
              margin-left: vw(8);
              font-size: vw(21);
            }
          }

        }

      }

      .one-right {
        margin-left: vw(50);
        width: vw(208);

        img {
          width: 100%;
          height: vw(130);
        }
      }

      &:nth-child(2)::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: vw(40);
        height: 0;
        width: 87%;
        border-top: 1px solid #e2e2e2;
      }
    }
  }

  .last {
    margin: 0 auto;
    height: vw(60);
    width: 87%;
    color: #bbbbbb;
    font-size: vw(22);
    border-top: 1px solid #e6e6e6;
    // visibility: hidden;
    // 设置元素的可见性，hiddle代表元素不可见。虽然元素不可见但是在文档中的位置还占据

    p {
      letter-spacing: vw(2);
      line-height: vw(60);
      text-align: center;
    }
  }
}